<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Todo List Online - Minimalist, No-Login Required Web Todo App</title>
        <meta
            name="keywords"
            content="online todo list, minimalist todo app, no login todo, web todo list, todo manager, task scheduler, memo app, browser-based todo, instant access, secure storage, personal todo, professional todo, work and life assistant">
        <meta
            name="description"
            content="uiineed's Todo List Online is a minimalist, no-login-required web app that helps you manage your tasks and schedules effortlessly. Store your todos securely in your browser's local cache, and enjoy a seamless experience without the hassle of sign-ups or logins. Perfect for both personal and professional use!">
        <link type="favicon" rel="shortcut icon" href="public/img/favicon.png"/>
        <link href="public/css/normalize.css" rel="stylesheet" media="screen">
        <link href="public/css/style.min.css" rel="stylesheet" media="screen">
        <script>
            // Automatically detect and switch language
            const browserLanguage = navigator.language || navigator.userLanguage;
            const languageCode = browserLanguage.split('-')[0].toLowerCase();
            if (!localStorage.getItem('uiineed-todos-lang')) localStorage.setItem('uiineed-todos-lang', languageCode);
            const userLanguage = localStorage.getItem('uiineed-todos-lang');
            if (userLanguage && userLanguage === "zh") window.location.href = (window.location.pathname === "/") ? 'index-zh.html' : window.location.href.replace('index.html', 'index-zh.html');
        </script>
        <script>
            const nativeAlert = window.alert;
            window.alert = function(message, title = 'Prompt') {
                return new Promise((resolve) => {
                    const overlay = document.createElement('div');
                    overlay.className = 'custom-alert-overlay';
                    const alertBox = document.createElement('div');
                    alertBox.className = 'custom-alert';
                    alertBox.innerHTML = `
<div class="custom-alert-title">${title}</div>
<div class="custom-alert-content">${message}</div>
<div class="custom-alert-buttons">
    <button class="custom-alert-btn confirm">OK</button>
</div>
                    `;
                    overlay.appendChild(alertBox);
                    document.body.appendChild(overlay);
                    const confirmBtn = alertBox.querySelector('.confirm');
                    confirmBtn.addEventListener('click', () => {
                        alertBox.style.animation = 'popOut 0.3s forwards';
                        setTimeout(() => {
                            document.body.removeChild(overlay);
                            resolve(true);
                        }, 300);
                    });
                    overlay.addEventListener('keydown', (e) => {
                        if (e.key === 'Escape') confirmBtn.click();
                    });
                    confirmBtn.focus();
                });
            };
            const nativeConfirm = window.alert;
            window.confirm = function(message, title = 'Please Confirm') {
                return new Promise((resolve) => {
                    const overlay = document.createElement('div');
                    overlay.className = 'custom-alert-overlay';
                    const alertBox = document.createElement('div');
                    alertBox.className = 'custom-alert';
                    alertBox.innerHTML = `
<div class="custom-alert-title">${title}</div>
<div class="custom-alert-content">${message}</div>
<div class="custom-alert-buttons">
    <button class="custom-alert-btn cancel">Cancel</button>
    <button class="custom-alert-btn confirm">OK</button>
</div>
                    `;
                    overlay.appendChild(alertBox);
                    document.body.appendChild(overlay);
                    const confirmBtn = alertBox.querySelector('.confirm');
                    const cancelBtn = alertBox.querySelector('.cancel');
                    confirmBtn.addEventListener('click', () => {
                        alertBox.style.animation = 'popOut 0.3s forwards';
                        setTimeout(() => {
                            document.body.removeChild(overlay);
                            resolve(true);
                        }, 300);
                    });
                    cancelBtn.addEventListener('click', () => {
                        alertBox.style.animation = 'popOut 0.3s forwards';
                        setTimeout(() => {
                            document.body.removeChild(overlay);
                            resolve(false);
                        }, 300);
                    });
                    overlay.addEventListener('keydown', (e) => {
                        if (e.key === 'Escape') cancelBtn.click();
                    });
                    cancelBtn.focus();
                });
            };
        </script>
        <!-- Vue 2.x Todo List -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
        <script src="public/js/vue.js"></script>
    </head>

    <body>
        <div class="bg-pattern"></div>
        <div class="todo-wrapper">
            <div id="todo-app" class="todo-app">
                <div class="container header ">
                    <div class="todo-input">
                        <h1 class="title">
                            <img src="public/img/todo.svg" alt="" class="title-1" draggable="false">
                            <div class="ani-vector">
                                <span></span>
                                <span></span>
                            </div>
                            <div class="pendulums">
                                <div class="pendulum">
                                    <div class="bar"></div>
                                    <div class="motion">
                                        <div class="string"></div>
                                        <div class="weight"></div>
                                    </div>
                                </div>
                                <div class="pendulum shadow">
                                    <div class="bar"></div>
                                    <div class="motion">
                                        <div class="string"></div>
                                        <div class="weight"></div>
                                    </div>
                                </div>
                            </div>
                        </h1>
                        <div class="add-content-wrapper">
                            <input
                                type="text"
                                rows="3"
                                class="add-content"
                                placeholder="Add a to-do item..."
                                v-model="newTodoTitle"
                                @keyup.enter="addTodo"
                                :class='{empty:emptyChecked}'/>
                            <transition name="tips">
                                <div class="tips" v-if='emptyChecked' style="color:red">💡Please enter content!</div>
                            </transition>
                            <button class="btn submit-btn" type="button" @click="addTodo">Add</button>
                        </div>

                    </div>
                </div>

                <!-- todo list -->
                <div class="container main">
                    <div class="todo-list-box">
                        <div class="bar-message">
                            <input
                                type="button"
                                class="btn btn-label btn-allFinish"
                                value="Mark All Done"
                                @click="markAllAsCompleted"
                                v-if="todos.length || recycleBin.length"/>
                            <template>
                                <div>
                                    <div v-if="!isEditing" @dblclick="editText" class="bar-message-text">
                                        {{ slogan }}
                                    </div>
                                    <div v-else="v-else">
                                        <input
                                            v-model="slogan"
                                            ref="sloganInput"
                                            class="slogan-input"
                                            @keyup.enter="saveText"
                                            @keyup.esc="cancelText"/>
                                        <div class="todo-btn btn-edit-submit slogan-btn" @click="saveText"><img
                                            src=""
                                            alt="Finish"></div>
                                    </div>
                                </div>
                            </template>
                        </div>

                        <ul v-if="!todos.length && showEmptyTips" class="empty-tips">
                            <li>Add Your First To-Do Item! 📝</li>
                            <li>Usage Tips 💡:</li>
                            <li>✔️ Press Enter to submit actions.</li>
                            <li>✔️ Drag to reorder your to-dos (PC only)</li>
                            <li>✔️ Double-click to edit slogan and tasks.</li>
                            <li>✔️ Access quick actions in the right sidebar.</li>
                            <li>🔒 Your data is stored locally in your browser.</li>
                            <li>📝 Supports data download and import.
                            </li>
                        </ul>

                        <transition-group
                            name="drag"
                            class="todo-list"
                            tag="ul"
                            mode="in-out"
                            @before-enter="beforeEnter"
                            @enter="enter"
                            @after-enter="afterEnter"
                            :css="false"
                            appear="appear">

                            <li
                                v-for='(todo, index) in filteredTodos'
                                :key='todo.id'
                                class='todo-item'
                                @dragenter="dragenter($event, index)"
                                @dragover="dragover($event, index)"
                                @dragstart="dragstart(index)"
                                :data-delay="index * 150 * delayTime"
                                v-show="show"
                                :draggable="!(editedTodo !== null && editedTodo.id === todo.id)">
                                <div
                                    class="todo-content"
                                    :class='{completed:todo.completed}'
                                    @dblclick="editdTodo(todo)">
                                    {{todo.title}}</div>
                                <div
                                    class="todo-btn btn-finish"
                                    v-if="!todo.completed"
                                    @click="markAsCompleted(todo)"></div>
                                <div
                                    class="todo-btn btn-unfinish"
                                    v-if="todo.completed"
                                    @click="markAsUncompleted(todo)">
                                    <img
                                        src=""
                                        alt="Mark as Incomplete"
                                        class="icon-finish" draggable="false">
                                </div>
                                <div
                                    v-if="todo.removed"
                                    class="todo-btn btn-restore"
                                    @click="restoreTodo(todo)">
                                    <img
                                        src=""
                                        alt="Restore" draggable="false">
                                </div>
                                <div
                                    class="todo-btn btn-delete"
                                    v-else="todo.removed"
                                    @click="removeTodo(todo)">
                                    <img
                                        src=""
                                        alt="Delete" draggable="false">
                                </div>

                                <div
                                    class="edit-todo-wrapper"
                                    v-if="editedTodo !== null && editedTodo.id === todo.id">
                                    <input
                                        type="text"
                                        class="edit-todo"
                                        value="Edit Todo..."
                                        v-if="editedTodo !== null && editedTodo.id === todo.id"
                                        v-model="todo.title"
                                        v-focus="true"
                                        @keyup.enter="editDone(todo)"
                                        @keyup.esc="cancelEdit(todo)"
                                        @dragstart.stop.prevent
                                        @mousedown.stop />
                                    <div class="todo-btn btn-edit-submit" @click="editDone(todo)">
                                        <img
                                            src=""
                                            alt="提交" draggable="false">
                                    </div>
                                </div>
                            </li>
                        </transition-group>
                        <div class="bar-message bar-bottom">
                            <div class="bar-message-text">
                                <span v-if="leftTodosCount">{{leftTodosCount}} items remaining</span>
                                <span v-else-if="completedTodosCount">All completed, good job!</span>
                            </div>
                        </div>
                    </div>

                    <div class="footer side-bar">
                        <div class="side-shortcut" @click="shortCutAction()" :class="{fold: isShow}">
                            <div class="shortcut-switch">
                                <span class="shortcut-title">{{shortCut}}</span>
                                <span class="shortcut-name">Quicks
                                </span>
                            </div>

                        </div>
                        <div class="todo-footer-box">
                            <ul class="todo-func-list filter">
                                <!-- <li v-if="todos.length || recycleBin.length">Filter：</li> -->
                                <!-- <li v-if="hasRemovedTodo" ><input type="button" value="Back"
                                v-if="hasRemovedTodo" @click="restoreTodo()"></li> -->
                                <li >
                                    <input
                                        class="btn-small action-showAll"
                                        type="button"
                                        value="All"
                                        :class="{selected: intention === 'all'}"
                                        @click="intention ='all'"></li>
                                <li v-if="completedTodosCount"><input
                                    class="btn-small action-progress"
                                    type="button"
                                    value="In Progress"
                                    v-if="leftTodosCount"
                                    :class="{selected: intention === 'ongoing'}"
                                    @click="intention ='ongoing'"></li>
                                <li v-if="completedTodosCount">
                                    <input
                                        class="btn-small action-completed"
                                        type="button"
                                        value="Completed"
                                        v-if="completedTodosCount"
                                        :class="{selected: intention === 'completed'}"
                                        @click="intention='completed'">
                                </li>
                                <li v-if="recycleBin.length">
                                    <input
                                        class="btn-small action-deleted"
                                        type="button"
                                        v-if="recycleBin.length"
                                        :class="{selected: intention === 'removed'}"
                                        value="Trash"
                                        @click="intention='removed'"/>
                                </li>
                            </ul>
                            <ul class="todo-func-list batch">
                                <!-- <li v-if="todos.length"></li> -->
                                <li v-if="leftTodosCount">
                                    <input
                                        type="button"
                                        class="btn-small completed-all"
                                        v-if="leftTodosCount"
                                        value="Finish all"
                                        @click="markAllAsCompleted">
                                </li>
                                <li v-if="completedTodosCount">
                                    <input
                                        type="button"
                                        value="Clear Completed"
                                        class="btn-small completed-clear"
                                        v-if="completedTodosCount"
                                        @click="clearCompleted">
                                </li>
                                <li v-if="todos.length"><input
                                    type="button"
                                    class="btn-small clear-all"
                                    value="Clear All"
                                    @click="clearAll">
                                </li>
                            </ul>
                            <ul class="todo-func-list datasave">
                                <li v-if="leftTodosCount">
                                    <input
                                        type="button"
                                        value="Export data"
                                        class="btn-small  action-download"
                                        id="download"
                                        onclick="handleClickDownload()"></input>
                                </li>
                                <li>
                                    <input
                                        value="Import(txt/json)"
                                        type="button"
                                        class="btn-small action-import"
                                        id="import"/>
                                    <!-- <input type="file" id="import-file" accept=".txt,.json"
                                    style="display:none"> -->
                                </li>
                            </ul>

                        </div>

                    </div>
                </div>

                <!-- Custom Info -->
                <div class="nav">
                    <div class="github">
                        <a href="https://github.com/ricocc/uiineed-todo-list?ref=opensource-todo" target="_blank" class="social-link" draggable="false">
                            <img src="public/img/social/github.svg" class="ic-social" alt="" draggable="false">
                        </a>
                    </div>
                    <!-- <div class="about">
                        <div class="info">
                            <div
                                class="info-ico"
                                @click="togglePop"
                                :style="{ fontWeight: popShow ? 'normal' : 'bold' }">
                                About
                            </div>
                            <div class="popup animated popIn" v-if="!popShow">
                                <div class="author">
                                    <img src="public/img/author.jpg" alt="">
                                    RicoCC
                                </div>
                                <div class="author-info">
                                    <div class="author-desc">
                                        A simple one who loves design and code.
                                    </div>
                                </div>
                                <div class="social">
                                    <a href="mailto:ricocc@qq.com" class="social-link">
                                        <img src="public/img/social/mail.svg" class="ic-social" alt="">
                                    </a>
                                    <a
                                        href="https://www.xiaohongshu.com/user/profile/5f2b6903000000000101f51f?ref=uiineed-todo"
                                        target="_blank"
                                        class="social-link">
                                        <img src="public/img/social/xiaohongshu.svg" class="ic-social" alt="">
                                    </a>

                                    <a
                                        href="https://dribbble.com/rrrricocc?=todo-en"
                                        target="_blank"
                                        class="social-link">
                                        <img src="public/img/social/dribbble.svg" class="ic-social" alt="">
                                    </a>
                                    <a
                                        href="https://bsky.app/profile/ricocc.bsky.social"
                                        target="_blank"
                                        class="social-link">
                                        <img src="public/img/social/bluesky.svg" class="ic-social" alt="">
                                    </a>
                                    <a href="https://x.com/ricouii" target="_blank" class="social-link">
                                        <img src="public/img/social/x.svg" class="ic-social" alt="">
                                    </a>
                                </div>

                                <a href="https://blog.ricocc.com/?ref=todo" target="_blank" class="inspiration">🔖Rico's Blog↗
                                </a>
                            </div>
                        </div>
                    </div> -->

                <!-- witch Chinese Or English as homepage as required -->
                    <div class="language switch-language">
                        <a href="javascript:void(0)" class="en active" draggable="false">En</a>
                        <span>/</span>
                        <a href="index-zh.html" target="_self" class="zh" draggable="false" @click="saveLanguage('zh')">中</a>
                    </div>
                </div>

            </div>
        </div>
        <script>
            // localStorage operations
            var STORAGE_KEY = 'uiineed-todos';
            var todoStorage = {
                fetch: function() {
                    var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
                    todos.forEach(function(todo, index) {
                        todo.id = index;
                    });
                    todoStorage.uid = todos.length;
                    return todos;
                },
                save: function(todos) {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
                }
            }
        </script>
        <script>
            // Vue instance initialization
            var app = new Vue({
                el: '#todo-app',
                data: function() {
                    return {
                        todos: todoStorage.fetch(),
                        newTodoTitle: '',
                        editedTodo: null,
                        intention: 'all', // Default: all
                        checkEmpty: false,
                        recycleBin: [],
                        dragIndex: '',
                        enterIndex: '',
                        show: true,
                        delayTime: '1',
                        isShow: false,
                        shortCut: 'OPEN✨',
                        popShow: true,
                        windowWidth: document.documentElement.clientWidth,
                        slogan: this.getSlogan(),
                        isEditing: false,
                        originalSlogan: ""
                    };
                },
                watch: {
                    windowWidth(val) {
                        let that = this;
                    },
                    todos: {
                        handler: function(todos) {
                            todoStorage.save(todos);
                        },
                        deep: true
                    }
                },
                methods: {
                    editText() {
                        this.originalSlogan = this.slogan;
                        this.isEditing = true;
                        this.$nextTick(() => {
                            this.$refs.sloganInput.focus();
                        });
                    },
                    saveText() {
                        this.isEditing = false;
                        localStorage.setItem('uiineed-slogan', this.slogan);
                    },
                    cancelText() {
                        this.slogan = this.originalSlogan;
                        this.isEditing = false;
                    },
                    getSlogan() {
                        return localStorage.getItem('uiineed-slogan') || "Act Now, Simplify Life.☕";
                    },
                    contorlScreen: function() {
                        if (this.windowWidth < 768) {
                            this.isShow = !this.isShow;
                            return this.shortCut = 'Filter';
                        }
                    },
                    togglePop: function() {
                        this.popShow = !this.popShow;
                    },
                    shortCutAction: function() {
                        this.isShow = !this.isShow;
                        if (this.isShow) {
                            return this.shortCut = '＝';
                        } else {
                            return this.shortCut = 'OPEN✨';
                        }
                    },
                    shuffle: function() {
                        this.filteredTodos = _.shuffle(this.filteredTodos);
                    },
                    addTodo: function(e) {
                        if (this.newTodoTitle === '') {
                            this.checkEmpty = true;
                            return;
                        }
                        this.todos.unshift({
                            id: todoStorage.uid++,
                            title: this.newTodoTitle,
                            completed: false,
                            removed: false
                        });
                        this.newTodoTitle = '';
                        this.checkEmpty = false;
                        this.delayTime = '0';
                    },
                    markAsCompleted: function(todo) {
                        todo.completed = true;
                    },
                    markAsUncompleted: function(todo) {
                        todo.completed = false;
                    },
                    markAllAsCompleted: function() {
                        confirm('Confirm to mark all as completed?').then((confirmed) => {
                            if (confirmed) {
                                this.todos.map(function(todo) {
                                    if (!todo.completed) todo.completed = true;
                                });
                            }
                        }); 
                    },

                    removeTodo: function(todo) {
                        let removedTodo = this.todos.splice(this.todos.indexOf(todo), 1)[0];
                        removedTodo.removed = true;
                        this.recycleBin.unshift(removedTodo);
                    },
                    restoreTodo: function(todo) {
                        todo.removed = false;
                        this.todos.unshift(todo);
                        let pos = this.recycleBin.indexOf(todo);
                        this.recycleBin.splice(pos, 1);
                    },
                    editdTodo: function(todo) {
                        this.editedTodo = {
                            id: todo.id,
                            title: todo.title
                        }
                    },
                    lineFeed: function(event) {
                        if (event.keyCode == 13 && event.ctrlKey) {
                            this.newTodoTitle = this.newTodoTitle + '\n';
                        } else {
                            if (this.newTodoTitle === '') {
                                this.checkEmpty = true;
                                return;
                            }
                            this.todos.unshift({
                                id: todoStorage.uid++,
                                title: this.newTodoTitle,
                                completed: false,
                                removed: false
                            });
                            this.newTodoTitle = '';
                            this.checkEmpty = false;
                            this.delayTime = '0';
                        }
                    },
                    editDone: function(todo) {
                        if (todo.title === '') {
                            this.removeTodo(todo);
                        }
                        this.editedTodo = null;
                    },
                    cancelEdit: function(todo) {
                        todo.title = this.editedTodo.title;
                        this.editedTodo = null;
                    },
                    clearCompleted: function() {
                        confirm('Confirm to clear all completed items?').then((confirmed) => {
                            if (confirmed) {
                                this.completedTodos.map(todo => todo.removed = true);
                                this.recycleBin.unshift(...this.completedTodos);
                                this.todos = this.leftTodos;
                            }
                        });
                    },
                    clearAll: function() {
                        confirm('Confirm to clear all todo items?').then((confirmed) => {
                            if (confirmed) {
                                this.todos.map(todo => todo.removed = true);
                                this.recycleBin.unshift(...this.todos);
                                this.todos = [];
                            }
                        });
                    },

                    // Drag Operations
                    dragstart: function(index) {
                        this.dragIndex = index;
                    },
                    dragenter: function(e, index) {
                        e.preventDefault();
                        // Avoid source object triggering its own dragenter event
                        if (this.dragIndex !== index) {
                            const source = this.filteredTodos[this.dragIndex];
                            this.filteredTodos.splice(this.dragIndex, 1);
                            this.filteredTodos.splice(index, 0, source);
                            // After reordering, target index becomes source index
                            this.dragIndex = index;
                        }
                    },
                    dragover: function(e, index) {
                        e.preventDefault();
                    },
                    // JS hooks for animation
                    beforeEnter(dom) {
                        dom.classList.add('drag-enter-active');
                    },
                    enter(dom, done) {
                        let delay = dom.dataset.delay;
                        setTimeout(() => {
                            this.delayTime = '1';
                            dom.classList.remove('drag-enter-active');
                            dom.classList.add('drag-enter-to');
                            let transitionend = window.ontransitionend
                                ? "transitionend"
                                : "webkitTransitionEnd";
                            dom.addEventListener(transitionend, function onEnd() {
                                dom.removeEventListener(transitionend, onEnd);
                                done();
                                // Call done() to tell Vue animation is complete, triggering afterEnter hook
                            })
                        }, delay);
                    },
                    afterEnter(dom) {
                        dom.classList.remove('drag-enter-to');
                    },
                    saveLanguage(lang) {
                        localStorage.setItem('uiineed-todos-lang', lang);
                    }
                },

                mounted() {
                    this.show = true;
                    var that = this;
                    this.contorlScreen();
                    // Attach window.onresize event to mounted function
                    window.onresize = () => {
                        return (() => {
                            window.fullWidth = document.documentElement.clientWidth;
                            that.windowWidth = window.fullWidth; // width
                        })()
                    };
                },

                directives: {
                    focus: {
                        inserted: function(el) {
                            el.focus()
                        }
                    }
                },

                computed: {
                    emptyChecked: function() {
                        return this.newTodoTitle.length === 0 && this.checkEmpty
                    },
                    leftTodos: function() {
                        return this.todos.filter(function(todo) {
                            return !todo.completed
                        })
                    },
                    leftTodosCount: function() {
                        return this.leftTodos.length
                    },
                    hasRemovedTodo: function() {
                        return !!this.removedTodo
                    },
                    completedTodos: function() {
                        return this.todos.filter(function(todo) {
                            return todo.completed
                        })
                    },
                    completedTodosCount: function() {
                        return this.completedTodos.length
                    },
                    filteredTodos: function() {
                        if (this.intention === 'ongoing') {
                            return this.leftTodos
                        } else if (this.intention === 'completed') {
                            return this.completedTodos
                        } else if (this.intention === 'removed') {
                            return this.recycleBin
                        } else {
                            return this.todos
                        }
                    },
                    showEmptyTips() {
                        return this.filteredTodos.length === 0 && this.intention !== 'removed';
                    }
                }
                })
        </script>
        <script>
            // Fetch data from localStorage
            var fetchedTodos = todoStorage.fetch();

            const handleClickDownload = () => {
                const todosText = JSON.stringify(todoStorage.fetch(), null, 2);
                const date = new Date().toISOString().replace(/-|:|\.\d+/g, '');
                const fileName = `todos-${date.slice(0, 8)}-${date.slice(9, 15)}.txt`;
                
                const element = document.createElement('a');
                element.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(todosText);
                element.download = fileName;
                
                document.body.appendChild(element);
                element.click();
                document.body.removeChild(element);
            };

            // Import file
            let tempFileInput = null; // Store dynamically created file input element
            document.getElementById('import').addEventListener('click', function() {
                if (!tempFileInput) {
                    tempFileInput = document.createElement('input');
                    tempFileInput.type = 'file';
                    tempFileInput.accept = '.txt,.json';
                    tempFileInput.style.display = 'none';
                    this.parentNode.appendChild(tempFileInput);

                    tempFileInput.addEventListener('change', function(event) {
                        var file = event.target.files[0];
                        if (!file) return alert('No file selected!', 'Error');
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            var content = e.target.result;
                            try {
                                var importedData;
                                if (file.type === 'application/json') {
                                    // If JSON file, parse directly
                                    importedData = JSON.parse(content);
                                } else if (file.type === 'text/plain') {
                                    // If TXT file, try to parse as JSON
                                    importedData = JSON.parse(content.trim());
                                } else {
                                    throw new Error('Unsupported file type');
                                }
                                // Get current data from localStorage
                                var currentTodos = todoStorage.fetch() || [];
                                // Get current data count for new unique ids
                                var nextIdIndex = currentTodos.length;
                                // Update ids for imported data
                                importedData.forEach((item, index) => {
                                    item.id = nextIdIndex + index;
                                });
                                // Append imported data to existing data
                                var updatedTodos = currentTodos.concat(importedData);
                                // Update localStorage
                                todoStorage.save(updatedTodos);
                                // Update page content
                                updatePageContent(updatedTodos);
                                alert('File imported successfully, data has been appended!');
                            } catch (error) {
                                alert('File parsing error, please ensure correct format: ' + error.message, 'Error');
                            }
                        };
                        reader.onerror = function(e) {
                            alert('Error reading file: ' + e.target.error.name, 'Error');
                        };
                        reader.readAsText(file);
                        this.parentNode.removeChild(tempFileInput);
                        tempFileInput = null;
                    });
                }
                tempFileInput.click();
            });

            function updatePageContent(data) {
                app.todos = data;
            }

        </script>
    </body>

</html>